<template>
  <div>
        <div class="search">
          <input v-model="keyword" class="search-input"   placeholder="输入城市名或拼音">
        </div>
        <div class="search-content" ref="search" v-show="keyword">
              <ul>
                <li class="search-item border-bottom" v-for="item in list" :key="item.id" @click="handleCityClick(item.name)">
                    {{item.name}}
                </li>
                <li class="search-item border-bottom" v-show="hasNoData">
                   没有找到匹配的数据
                </li>
              </ul>
        </div>
  </div>
   
</template>

<script>
    import Bscroll from 'better-scroll'
    import {mapMutations} from 'vuex'
    export default {
        name: "CitySearch",
        props: {
           cities: Object
        },
        data () {
          return {
            keyword: "",
            list: [],
            timer: null
          }
        },
        methods: {
             handleCityClick (city) {
              /* //this.$store.dispatch('changeCity',city);
               this.$store.commit('changeCity',city);
               //alert(city);
               this.$router.push('/');   // 跳转到首页
              }*/
              this.changeCity(city);
              //alert(city);
              this.$router.push('/');  // 跳转到首页,编程式导航
           },
           ...mapMutations(['changeCity'])
        },
        computed: {
          hasNoData () {
            return !this.list.length
          }
        },
        watch: {
          keyword () {
            if(this.timer){
              clearTimeout(this.timer);
            }
            if (!this.keyword) {
              this.list = [];
              return
            }
            this.timer =  setTimeout(() => {
              const result = [];
              for (let i in this.cities) {
                 this.cities[i].forEach((value) => {
                     if (value.spell.indexOf(this.keyword) >-1 || value.name.indexOf(this.keyword > -1) ) {
                       result.push(value);
                     }
                 })
              }
              this.list = result;
            },100)
          }
        },
        mounted () {
          this.scroll = new Bscroll(this.$refs.search);
        }
    }
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
.search 
    height: 0.72rem
    padding: 0 .1rem
    background: $bgColor
    .search-input 
       box-sizing: border-box
       width: 100%
       height: .62rem
       line-height: .62rem
       text-align: center
       border radius 0.06rem
       color: #666
  .search-content 
       z-index: 1
       overflow: hidden
       position: absolute
       top: 1.58rem
       left: 0
       right: 0 
       bottom: 0 
       .search-item 
          line-height: .62rem
          padding-left: .2rem
          color: #666
          background: #fff

</style>

